<template>
  <div class="myfooter">
    <van-tabbar v-model="active" router>
      <van-tabbar-item icon="home-o" to="/index"> 首页</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o" to="/vip">会员</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :badge="num" to="/shopcart"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="search" to="/search">搜索 0</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { bus } from "@/utils/bus.js";

export default {
  mounted() {
    bus.$on("getTotalNum1", (n) => {
      this.num = n.type === "update" ? n.count : this.num + n.count;
    });
  },
  data() {
    return {
      active: 0,
      num: 0,
    };
  },
  //监听器
  watch: {
    //监听路由是否变化 管理顶部导航的变化
    //即就算去到其它页面刷新也会保存该状态
    $route(to, from) {
      if (to.path == "/shopcart") {
        this.active = 2;
      } else if (to.path == "/vip") {
        this.active = 1;
      } else if (to.path == "/search") {
        this.active = 3;
      }
    },
  },
};
</script>

.<style lang="less" scoped>
.myfooter {
  .van-tabbar-item {
    background-color: #f7f7f7;
  }
}
</style>